<template>
	<view class="message-view" :style="messageStyle" v-show="isShow">{{tips}}</view>
</template>

<script>
	export default {
		name:"message-view",
		data() {
			return {
				isShow: false,
				tips: "",
				messageType: "other",
				navgationBarHeight: 0
			};
		},
		computed: {
			messageStyle: function() {
				return {
					"--navgation-bar-height": this.navgationBarHeight + 'px',
					"background-color": this.messageType === 'error' ? '#dc3636':'#3487FF'
				}
			}
		},
		created: function() {
			// #ifdef MP
			let { top, height } = uni.getMenuButtonBoundingClientRect()
			let { statusBarHeight, safeAreaInsets, bottomSafeHeight } = uni.getSystemInfoSync()
			this.navgationBarHeight = statusBarHeight + Math.max(44, 2*(top - statusBarHeight) + height)
			// #endif
			
			// #ifdef WEB
			this.navgationBarHeight = 44
			// #endif
			
			// #ifdef APP-PLUS
			let { statusBarHeight } = uni.getSystemInfoSync()
			this.navgationBarHeight = 44 + statusBarHeight
			// #endif
		},
		methods: {
			show: function(options) {
				this.isShow = true
				this.tips = options.tips
				this.messageType = options.messageType
				
				let timer = setTimeout(() => {
					clearTimeout(timer)
					this.isShow = false
					this.tips = ""
					this.messageType = "other"
					if(options.complete) {
						options.complete()
					}
				}, options.duration ? options.duration:3000)
			}
		}
	}
</script>

<style scoped>
	message-view, .message-view {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		top: calc(var(--navgation-bar-height) + 20rpx);
		padding: 20rpx;
		background-color: red;
		border-radius: 10rpx;
		box-sizing: border-box;
		color: white;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: center;
		z-index: 99999;
	}
</style>